import React, { PureComponent } from 'react'

//1.引入动画
import { CSSTransition } from "react-transition-group";

import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

import './CSSTransition.css'

const { Meta } = Card;

export default class CSSTransitionDemo extends PureComponent {
  constructor() {
    super()

    this.state = {
      isShow: true
    }
  }
  
  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button onClick={e => {this.setState({isShow: !isShow})}}>
          Click to Enter
        </button>
        {/* 3. 设置属性
          in: 显示组件，触发进入或退出状态。接收布尔值
          timeout： 动画时长 用来控制class添加的时间
47
          classNames：动画类名 （默认类名是 -enter之类的，加上类名就是 my-card-enter）
          unmountOnExit：在动画退出时卸载dom
          appear：第一次出现的动画
        */}
        <CSSTransition
          in={isShow}
          timeout={500}
          classNames="my-card"
          unmountOnExit
          appear
          onEnter={ele => console.log('开始进入')}
          onEntering={ele => console.log('正在进入')}
          onEntered={ele => console.log('进入完成')}
          onExit={ele => console.log('开始退出')}
          onExiting={ele => console.log('退出状态')}
          onExited={ele => console.log('退出完成')}
        >
        {/*2.包裹需要动画的组件  */}
          <Card
            style={{ width: 300 }}
            cover={
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            }
            actions={[
              <SettingOutlined key="setting" />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title="Card title"
              description="This is the description"
            />
          </Card>
        </CSSTransition>
      </div>
    )
  }
}
